<template>
	<div v-if="orderResult" class="home-pay-result-wrap">
		<van-nav-bar title="付款结果" left-arrow fixed @click-left="onClickLeft" />
		<!-- 成功 -->
		<div v-if="status == 1" class="result-box">
			<img class="pay-icon" :src="paySuccessIcon">
			<div class="pay-order-desc">订单支付成功</div>
			<div class="pay-type">支付方式：<span>{{ orderResult.pay_title }}</span></div>
			<div class="pay-type">支付金额：<span>¥{{ orderResult.price }}</span></div>

			<div class="btn-ul">
				<div class="btn-li clrcle" @click="handleToOrder">查看订单</div>
				<div class="btn-li" @click="handleToHome">回到首页</div>
			</div>
		</div>

		<!-- 失败 -->
		<div v-if="status == 2" class="result-box">
			<img class="pay-icon" :src="payFailIcon">
			<div class="pay-order-desc fail">订单支付失败</div>
			<div class="pay-type" style="text-align: center;padding-left: 0;">请尽快完成付款</div>
			<div class="pay-type" style="text-align: center;padding-left: 0;">否则订单将会被系统取消</div>

			<div class="btn-ul">
				<div class="btn-li clrcle" @click="handleToOrder">查看订单</div>
				<div class="btn-li" @click="handleToPay">重新付款</div>
			</div>
		</div>


		<div v-if="status == 1 || status == 2" class="tip-msg">
			<div class="tip-msg-li">温馨提示: </div>
			<div class="tip-msg-li">智乐生活APP不会以订单异常、系统异常为由要求您点击任何网址链接进行退款操作。</div>
		</div>


	</div>
</template>

<script>
import { payFailIcon, paySuccessIcon } from '@/tool/static-img';
import { ORDER_VERIFY } from '@/api/home';
export default {
	data() {
		return {
			payFailIcon, paySuccessIcon,
			orderResult: null,
			status: 0
		}
	},

	created() {
		const orderResult = JSON.parse(localStorage.getItem('orderResult'))
		this.orderResult = orderResult;
		if (this.$route.query.status == 1) {
			this.status = 1;
		} else {
			this.getOrderResult();
		}
	},
	methods: {
		onClickLeft() {
			if (this.$route.query.status == 1) {
				this.$router.back()
			} else {
				this.$router.replace({
					name: 'home'
				})
			}
		},
		handleToOrder() {
			this.$router.replace({
				name: 'orderList'
			})
		},
		handleToHome() {
			this.$router.replace({
				name: 'home'
			})
		},
		// 重新付款
		handleToPay() {
			if (this.orderResult.order_id) {
				// 子单
				this.$router.push({
					name: 'cashier',
					query: {
						order_id: this.orderResult.order_id
					}
				})

			} else {
				// 走缓存
				this.$router.push({
					name: 'cashier'
				})
			}
		},
		getOrderResult() {
			if (!this.orderResult) {
				console.error('订单数据不存在');
				this.status = 2;
				return;
			}
			this.$http.post(ORDER_VERIFY + this.orderResult.trade_no)
				.then(res => {
					console.log(res.data, '订单验证')
					this.status = 1;
				})
				.catch(() => {
					this.status = 2;
				})
		}
	}

}
</script>

<style lang="scss">
.home-pay-result-wrap {
	position: relative;
	min-height: 100vh;
	padding-top: 62px;
	box-sizing: border-box;

	.van-nav-bar .van-icon {
		color: #333333;
	}

	.van-nav-bar__arrow {
		font-size: 20px;
	}

	.van-hairline--bottom::after {
		display: none;
	}

	.result-box {
		margin-top: 0.48rem;

		.pay-icon {
			display: block;
			width: 1.2rem;
			height: 1.2rem;
			margin: auto;
		}

		.pay-order-desc {
			height: 0.5rem;
			margin-top: 0.32rem;
			line-height: 0.5rem;
			font-weight: 500;
			font-size: 0.36rem;
			color: #01CC4E;
			text-align: center;

			&.fail {
				color: #F9301B;
			}
		}

		.pay-type {
			height: 0.4rem;
			margin-top: 0.24rem;
			padding-left: 2.36rem;
			line-height: 0.4rem;
			font-size: 0.28rem;
			font-weight: 400;
			color: #999999;

			span {
				font-weight: 500;
				color: #333333;
			}
		}
	}

	.btn-ul {
		display: flex;
		padding: 0 0.32rem;
		margin-top: 0.72rem;
		justify-content: space-between;

		.btn-li {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 3.28rem;
			height: 0.88rem;
			font-size: 0.32rem;
			color: #ffffff;
			background: linear-gradient(90deg, #75BE70 0%, #56AE48 100%);
			border: 1px solid #31A653;
			border-radius: 0.44rem;

			&.clrcle {
				color: #31A653;
				background: #ffffff;
				border: 1px solid #31A653;
			}
		}
	}

	.tip-msg {
		margin-top: 0.8rem;
		padding: 0 0.32rem;

		.tip-msg-li {
			line-height: 0.34rem;
			font-size: 0.24rem;
			font-weight: 400;
			color: #999999;
		}
	}
}
</style>
